import React, { useState, useEffect } from 'react';
import { Input, Form, Row, Col } from 'antd';
import { connect } from 'dva';
import styles from './index.less';
import logoUrl from '@/assets/images/logo.png';
import Link from 'umi/link';
const { Search } = Input;
const creator = (type, payload) => ({ type, payload });
function Encyclopedias(props) {
  const { dispatch } = props;
  const { allPerson } = props.person;
  const [searchResult, setSearchResult] = useState([]);
  const [visible, setVisible] = useState(false);

  const searchHandle = value => {
    //获取所有人物列表
    dispatch(creator('person/getPerson')).then(res => {
      if (res.httpStatus === 200) {
        if (value) {
          let result=[];
          result = res.data.filter(item => item.name.indexOf(value) !== -1);
          setSearchResult([...result]);
        }else{
          setSearchResult([]);
        }
        setVisible(true);
      }
    });
  };
  console.log(searchResult);
  return (
    <div className={styles.container}>
      <h2 className={styles.title}>
        <img src={logoUrl} className={styles.logo} />
        <span> 智者.人物</span>
      </h2>
      <div className={styles.center}>
        <Search style={{ width: 600 }} onSearch={searchHandle} enterButton />
        <div style={{ marginTop: 10, display: visible ? 'block' : 'none' }}>
          {searchResult.length ? (
            <div className={styles.result}>
              {searchResult.map(item => {
                let str = '';
                item.overview.map(item => (str += item.desc));
                return (
                  <Row key={item._id}>
                    <Col span={8}>
                      <Link
                        to={{
                          pathname: '/outer-world/encyclopedias/person/completedPerson',
                          search: `?name=${item.name}`,
                        }}
                      >
                        <img src={item.imageUrl} style={{ width: 180 }} />
                      </Link>
                    </Col>
                    <Col span={16}>
                      <p>职业：{item.career}</p>
                      <p>生卒：{item.birthDate + '~' + item.deathDate}</p>
                      <p>代表作品:{item.represent.join(',')}</p>
                      <p style={{ wordBreak: 'break-word' }}>
                        简介：{str.length < 110 ? str : str.substring(0, 110) + '...'}
                      </p>
                    </Col>
                  </Row>
                );
              })}
            </div>
          ) : (
            <p style={{ display: 'inline-block', width: 600, textAlign: 'left' }}>
              暂未收录该词条，您可以
              <Link to="/outer-world/encyclopedias/person/new-person">新建词条</Link>
            </p>
          )}
        </div>
      </div>
    </div>
  );
}

const WrappedEncyclopedias = Form.create()(Encyclopedias);

export default connect(({ person }) => ({ person }))(WrappedEncyclopedias);
